<template>
  <div>
    <div class="header-select">
      <el-select v-model="valueTime" class="m-2 select-year" placeholder="Select">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="valueCompany" class="m-2 select-company" placeholder="Select">
        <el-option
          v-for="item in optionsCopy"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="rectification-content" ref="rectification-echarts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      valueTime: '2019',
      valueCompany: '集团',
      options: [
        {
          value: '2019',
          label: '2019',
        },
        {
          value: '2020',
          label: '2020',
        },
        {
          value: '2021',
          label: '2021',
        },
        {
          value: '2022',
          label: '2022',
        },
        {
          value: '2023',
          label: '2023',
        },
      ],
      optionsCopy: [
        {
          value: '集团',
          label: '集团',
        },
        {
          value: '上市公司',
          label: '上市公司',
        },
        {
          value: '民营企业',
          label: '民营企业',
        },
      ],
    };
  },
  mounted() {
    this.getCharts();
  },
  methods: {
    getCharts() {
      const el = this.$refs['rectification-echarts'];
      const myChart = echarts.init(el);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          data: ['整改中', '已整改', '超期', '整改率'],
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '至臻云总部',
              '至臻云总部',
              '至臻云总部',
              '至臻云总部',
              '至臻云总部',
              '至臻云总部',
              '至臻云总部',
              '至臻云总部',
            ],
            axisPointer: {
              type: 'shadow',
            },
            // x轴坐标倾斜展示
            // axisLabel: {
            //   interval: 0,
            //   rotate: 20
            // }
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50,
          },
          {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50,
          },
        ],
        series: [
          {
            name: '整改中',
            type: 'bar',
            tooltip: {
              valueFormatter(value) {
                return value;
              },
            },
            itemStyle: {
              normal: {
                color: '#509CFF',
              },
            },
            barWidth: 15,
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          },
          {
            name: '已整改',
            type: 'bar',
            tooltip: {
              valueFormatter(value) {
                return value;
              },
            },
            itemStyle: {
              normal: {
                color: '#48CA8B',
              },
            },
            barWidth: 15,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          },
          {
            name: '超期',
            type: 'bar',
            tooltip: {
              valueFormatter(value) {
                return value;
              },
            },
            itemStyle: {
              normal: {
                color: '#FFA762',
              },
            },
            barWidth: 15,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          },
          {
            name: '整改率',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter(value) {
                return value;
              },
            },
            itemStyle: {
              normal: {
                color: '#FF7560',
              },
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.header-select {
  text-align: right;
  margin-bottom: 7px;
}
:deep(.el-select) {
  width: 100px;
}
:deep(.el-input__wrapper) {
  height: 26px;
}
.select-year {
  margin-right: 10px;
}
.select-company {
  margin-right: 24px;
}
.rectification-content {
  width: 1172px;
  height: 260px;
}
</style>
